<template>
	<div class="navbar">
		<div class="con" v-show="!searchVisible">
			<NewAniBorder :width="100" :height="40">
				<div class="con-last con-shuju">
					<img src="../../../../assets/new/new_comp.png" @click="navToShujuSurveillance">
					<span class="con-left-line"></span>
					<img src="../../../../assets/new/shexiangtou@2x.png" @click="navToVideoSurveillance">
				</div>
			</NewAniBorder>
			<NewAniBorder :width="widthSelect" :height="40" style="margin: 0 10px;">
				<div class="con-left" :class="{'con-last':currentTabbarIndex==6}">
					<Icon custom="i-icon icon-sousuo1" size="23" class="con-left-btn" @click="onClickSearch"
						v-if="currentTabbarIndex != 6" />
					<span class="con-left-line" v-if="currentTabbarIndex != 6"></span>
					<Icon custom="i-icon icon-jiahao" size="23" class="con-left-btn" @click="onClickAddQuest" />
					<span class="con-left-line"
						v-if="adminMenuArr.length>0"></span>
					<Icon custom="i-icon icon-fenlei" size="18" class="con-right-btn" @click="onClickAdminMenu"
						v-if="adminMenuArr.length>0" />
				</div>
			</NewAniBorder>
			<NewAniBorder :width="120" :height="40">
				<div class="con-right" @click="onClickAccount">
					<img src="../../../../assets/main/head.png" alt="">
					<span class="name">{{account}}</span>
					<Icon custom="i-icon icon-xiajiantou2" size="16" />
				</div>
			</NewAniBorder>
		</div>
		<MyCollapse v-model="searchVisible" :custom-style="{top: '30px',right: '8px'}" disabled>
			<div class="search">
				<div class="search-top">
					<Icon custom="i-icon icon-guanbi" size="18" class="cursor-pointer" @click.stop="onClickSearch" />
					<input v-model="searchValue" placeholder="请输入环卫要素名称" class="input">
					<Icon custom="i-icon icon-sousuo1" size="18" />
				</div>
				<div class="search-menu" v-show="!searchValue" v-if="!searchMenuDetailVisible">
					<div class="search-menu-item" v-for="(item,index) in searchMenuArr" :key="index"
						@click.stop="onClickSearchMenuItem(item)">
						<img :src="item.img" class="search-menu-img">
						<span>{{item.title}}</span>
					</div>
				</div>

				<div class="search-menuDetail" v-show="!searchValue" v-else>
					<div class="search-menuDetail-title">
						<p @click.stop="onClickReturnSearchMenu">
							<img src="../../../../assets/new/new_img_back.png">
							<span>{{searchMenuDetailTitle}}</span>
						</p>
					</div>
					<div class="search-menuDetail-top">
						<MyTreeSelect :value="searchMenuDetailDepart" placeholder="请选择部门" clearable
							:data="departmentTreeArr" search style="width:130px" class="m-r-5"
							@onSelectChange="onSelectChangeDepaTree">
						</MyTreeSelect>
						<Select v-model="searchMenuDetailType" :placeholder="searchMenuDetailTitle" clearable
							style="width:90px" class="m-r-5" @on-change="onSearch"
							v-if="searchMenuDetailTitle != '垃圾桶'">
							<Option v-for="item of searchMenuDetailTypeArr" :value="item.name" :key="item.id">
								{{ item.name }}
							</Option>
						</Select>
						<Select v-model="searchMenuDetailStatus" :placeholder="searchMenuDetailTitle+'状态'" clearable
							style="width:130px" @on-change="onSearch" v-show="searchMenuDetailTitle != '网格'">
							<Option v-for="item of searchMenuDetailStatusArr" :value="item.id" :key="item.id">
								{{ item.name }}
							</Option>
						</Select>
					</div>
					<div class="search-menuDetail-list">
						<!-- 车辆 -->
						<div class="search-menuDetail-item" v-for="(item,index) in searchMenuDetailArr" :key="index"
							v-show="searchMenuDetailTitle == '车辆'">
							<div class="search-img">
								<img src="../../../../assets/new/new_img_line.png">
							</div>
							<img :src="item.carPicture ? item.carPicture : carPicture" class="search-menuDetail-img">
							<div class="flex-1 search-menuDetail-item-flex"
								@click.stop="onClickSearchMenuDetailItem(item)">
								<div class="search-menuDetail-name">
									<!-- <span class="search-menuDetail-status"
                        :class="{'search-menuDetail-status-no': item.onlineStatus != 0}">
                    {{(item.onlineStatus == 0) ? "在线" : (item.onlineStatus == 1 ? "离线" : "无设备")}}
                  </span> -->
									<span>{{item.name}}</span>
									<span class="search-menuDetail-status m-l-5"
										:class="{'search-menuDetail-status-no': item.onlineStatus == 2}"
										v-if="item.onlineStatus == 2 && item.videoOnlineStatus == 2">
										无设备
									</span>
									<span class="search-menuDetail-status m-l-5"
										:class="{'search-menuDetail-status-no': item.onGuardStatus != 0}"
										v-if="item.onlineStatus == 0 && item.onGuardStatus != null">
										{{item.onGuardStatus == 0 ? '在岗' : '离岗'}}
									</span>
									<span class="search-menuDetail-status m-l-5"
										:class="{'search-menuDetail-status-no': item.attendance == 1}"
										v-if="item.onlineStatus != 2 && item.attendance != null">
										{{item.attendance == 0 ? '出勤' : '缺勤'}}
									</span>
								</div>
								<div class="search-menuDetail-desc" v-if="item.onlineStatus == 0">
									<img :src="item.onlineStatus == 0?ybPhoto:ybLightPhoto">
									{{item.speed || 0}}km/h
								</div>
								<div class="search-menuDetail-not" v-if="item.onlineStatus == 1">
									离线
								</div>
							</div>
							<div class="item-icon search-menuDetail-icon">
								<img src="../../../../assets/new/search_lx.png" class="m-r-4"
									@click.stop="onClickTrack(item)">
								<!-- <Icon custom="i-icon icon-guiji1" size="24" color="#25BB96" class="m-r-4"
									@click.stop="onClickTrack(item)" /> -->
								<Icon custom="i-icon icon-jiankong11" size="24" class="m-r-4"
									:style="{color:item.videoOnlineStatus == 0 ? '#00BAFF' : '#666','cursor':item.videoOnlineStatus == 0 ? 'pointer' : 'not-allowed'}"
									v-if="item.videoOnlineStatus != 2" @click="onClickSearchVideo(item)" />
								<Icon custom="i-icon icon-jiantou2" size="18" @click.stop="onClickSearchDetail(item)" />
							</div>
						</div>
						<!-- 人员 -->
						<div class="search-menuDetail-item" v-for="(item,index) in searchMenuDetailArr"
							:key="index+'people'" v-show="searchMenuDetailTitle == '人员'">
							<div class="search-img">
								<img src="../../../../assets/new/new_img_line.png">
							</div>
							<img :src="item.personPhoto ? item.personPhoto : personPhoto" class="search-menuDetail-img">
							<div class="flex-1 search-menuDetail-item-flex"
								@click.stop="onClickSearchMenuDetailItem(item)">
								<div class="search-menuDetail-name">
									<span class="search-menuDetail-status"
										:class="{'search-menuDetail-status-no': !item.onlineStatus || item.onlineStatus && item.onlineStatus != 0}">
										{{(item.onlineStatus == 0) ? "在线" : (item.onlineStatus == 1 ? "离线" : "无设备")}}
									</span>
									<span>{{item.name}}</span>
									<span class="search-menuDetail-status m-l-5"
										:class="{'search-menuDetail-status-no': item.onGuardStatus != 0}"
										v-if="item.onlineStatus == 0 && item.onGuardStatus != null">
										{{item.onGuardStatus == 0 ? '在岗' : '离岗'}}
									</span>
									<span class="search-menuDetail-status m-l-5"
										:class="{'search-menuDetail-status-no': item.attendance == 1}"
										v-if="item.onlineStatus != 2 && item.attendance != null">
										{{item.attendance == 0 ? '出勤' : '缺勤'}}
									</span>
								</div>
								<div class="search-menuDetail-desc">
									<Icon custom="i-icon icon-gongsi" size="16" class="m-r-5" />
									{{item.company}}
								</div>
							</div>
							<div class="item-icon search-menuDetail-icon">
								<!-- <Icon custom="i-icon icon-guiji1" size="24" color="#25BB96" class="m-r-4"
									@click.stop="onClickTrack(item)" /> -->
								<img src="../../../../assets/new/search_lx.png" class="m-r-4"
									@click.stop="onClickTrack(item)">
								<Icon custom="i-icon icon-jiankong11" size="24" class="m-r-4"
									:style="{color:item.videoOnlineStatus == 0 ? '#00BAFF' : '#666','cursor':item.videoOnlineStatus == 0 ? 'pointer' : 'not-allowed'}"
									v-if="item.videoOnlineStatus != 2" @click="onClickSearchVideo(item)" />
								<Icon custom="i-icon icon-jiantou2" size="18" class="m-r-4"
									@click.stop="onClickSearchDetail(item)" />
							</div>
						</div>

						<!-- 网格 -->
						<div class="search-menuDetail-item" v-for="(item,index) in searchMenuDetailArr"
							:key="index+'grid'" v-show="searchMenuDetailTitle == '网格'"
							@click.stop="onClickSearchDetail(item)">
							<div class="flex-1">
								<div class="search-menuDetail-name">
									<span class="line1">{{item.name}}</span>
								</div>
								<div class="search-menuDetail-desc">
									<span>
										<Icon custom="i-icon icon-shangbaoren" size="16" class="m-r-5" />
										负责人：{{item.manager_name ? item.manager_name : '- -'}}
									</span>
									<span>
										<Icon custom="i-icon icon-mianji2" size="16" class="m-r-5" />
										面积：{{item.area ? item.area + 'm²' : '- -'}}
									</span>
								</div>
							</div>
							<div class="item-icon">
								<Icon custom="i-icon icon-zongheguanli_daichakan eye" size="24" class="m-r-4" />
							</div>
						</div>

						<!-- 公厕 中转站 停车场 垃圾桶 收集点 -->
						<div class="search-menuDetail-item" v-for="(item,index) in searchMenuDetailArr"
							:key="index+'toilet'"
							v-show="searchMenuDetailTitle == '公厕' || searchMenuDetailTitle == '中转站' || searchMenuDetailTitle == '停车场' || searchMenuDetailTitle == '垃圾桶' || searchMenuDetailTitle == '收集点'|| searchMenuDetailTitle == '窨井盖'|| searchMenuDetailTitle == '处理站'">
							<div class="search-img">
								<img src="../../../../assets/new/new_img_line.png">
							</div>
							<img :src="item.fileUrl ? item.fileUrl : facilityPicture" class="search-menuDetail-img"
								v-if=" searchMenuDetailTitle == '中转站' || searchMenuDetailTitle == '停车场'">
							<img :src="item.fileUrl ? item.fileUrl : trashPicture" class="search-menuDetail-img"
								v-if="searchMenuDetailTitle == '垃圾桶' || searchMenuDetailTitle == '收集点'">
							<img :src="item.fileUrl ? item.fileUrl : toiletPicture" class="search-menuDetail-img"
								v-if="searchMenuDetailTitle == '公厕'">
							<img :src="item.fileUrl ? item.fileUrl : jgPicture" class="search-menuDetail-img"
								v-if="searchMenuDetailTitle == '窨井盖'">
							<img :src="item.fileUrl ? item.fileUrl : clPicture" class="search-menuDetail-img"
								v-if="searchMenuDetailTitle == '处理站'">
							<div class="flex-1 search-menuDetail-item-flex"
								@click.stop="onClickSearchMenuDetailItem(item)">
								<div class="search-menuDetail-name">
									<span class="search-menuDetail-status"
										:class="{'search-menuDetail-status-no': item.faclStatus != '正常'}">{{item.faclStatus}}</span>
									<span class="search-menuDetail-cont line1">{{item.name}}</span>
								</div>
								<div class="search-menuDetail-desc">
									<Icon custom="i-icon icon-shangbaoren" size="16" class="m-r-5" />
									负责人：{{item.princiPalName || '- -'}}
								</div>
							</div>
							<div class="item-icon">
								<template v-if="searchMenuDetailTitle != '垃圾桶' && searchMenuDetailTitle != '收集点'">
									<Icon custom="i-icon icon-jiankong11" size="24" class="m-r-4"
										:style="{color:item.videoOnlineStatus == 0 ? '#00BAFF' : '#666','cursor':item.videoOnlineStatus == 0 ? 'pointer' : 'not-allowed'}"
										v-if="item.videoOnlineStatus != 2" @click.stop="onClickSearchVideo(item)" />
								</template>
								<Icon custom="i-icon icon-jiantou2" size="18" class="m-r-4"
									v-if="searchMenuDetailTitle != '停车场'" @click.stop="onClickSearchDetail(item)" />
							</div>
						</div>

						<!-- 园林绿化 -->
						<div class="search-menuDetail-item" v-for="(item,index) in searchMenuDetailArr"
							:key="index+'garden'" v-show="searchMenuDetailTitle == '园林绿化'">
							<div class="search-img">
								<img src="../../../../assets/new/new_img_line.png">
							</div>
							<img :src="item.fileUrl ? item.fileUrl : gardenPicture" class="search-menuDetail-img">
							<div class="flex-1 search-menuDetail-item-flex"
								@click.stop="onClickSearchMenuDetailItem(item)">
								<div class="search-menuDetail-name">
									<span class="search-menuDetail-status">{{item.faclStatus || '- -'}}</span>
									<span class="search-menuDetail-cont line1">{{item.name}}</span>
								</div>
								<div class="search-menuDetail-desc">
									<Icon custom="i-icon icon-mianji2" size="16" class="m-r-5" />
									绿化面积：{{item.parkArea ? item.parkArea + 'km²' : '- -'}}
								</div>
							</div>
							<div class="item-icon search-menuDetail-icon">
								<Icon custom="i-icon icon-jiankong11" size="24" class="m-r-4"
									:style="{color:item.videoOnlineStatus == 0 ? '#00BAFF' : '#666','cursor':item.videoOnlineStatus == 0 ? 'pointer' : 'not-allowed'}"
									v-if="item.videoOnlineStatus != 2" @click="onClickSearchVideo(item)" />
								<Icon custom="i-icon icon-jiantou2" size="18" class="m-r-4"
									@click.stop="onClickSearchDetail(item)" />
							</div>
						</div>

						<!-- 名木古树 -->
						<div class="search-menuDetail-item" v-for="(item,index) in searchMenuDetailArr"
							:key="index+'tree'" v-show="searchMenuDetailTitle == '名木古树'">
							<div class="search-img">
								<img src="../../../../assets/new/new_img_line.png">
							</div>
							<img :src="item.fileUrl ? item.fileUrl : treePicture" class="search-menuDetail-img">
							<div class="flex-1 search-menuDetail-item-flex"
								@click.stop="onClickSearchMenuDetailItem(item)">
								<div class="search-menuDetail-name">
									<span
										class="search-menuDetail-status">{{item.faclStatus ? item.faclStatus : '- -'}}</span>
									<span class="search-menuDetail-cont line1">{{item.name}}</span>
								</div>
								<div class="search-menuDetail-desc">
									<Icon custom="i-icon icon-yuanlinlvdi" size="16" class="m-r-5" />
									树高：{{item.treeHeight ? item.treeHeight + '米' : '- -'}}
								</div>
							</div>
							<div class="item-icon search-menuDetail-icon">
								<Icon custom="i-icon icon-jiantou2" size="18" class="m-r-4"
									@click.stop="onClickSearchDetail(item)" />
							</div>
						</div>

						<infinite-loading @infinite="getSearchPageList" :distance="10" ref="infiniteLoading">
							<div slot="no-more">
								<div style="color: #ccc;">
									没有更多数据了
								</div>
							</div>
						</infinite-loading>
					</div>
				</div>
				<div class="search-result" v-show="searchValue">
					<div class="search-result-title">
						<span>"{{searchMenuDetailName}}"的搜索结果</span>
						<img src="../../../../assets/new/new_light.png">
					</div>
					<div class="search-result-list">
						<div class="search-result-item" v-for="(item,index) in searchArr" :key="index">
							<div class="search-result-name" v-if="item.children.length != 0">
								<div>{{item.title}}</div>
								<div>共{{searchTotal}}条</div>
							</div>
							<div class="search-result-item-list">
								<div class="search-result-item-item" v-for="(items,indexs) in item.children"
									:key="indexs" @click.stop="onClickSearchMenuDetailItem(items)">
									<div class="flex-1">
										<p class="search-result-item-name">{{items.name}}</p>
										<p>{{items.company}}</p>
									</div>
									<div class="search-result-item-icon" :class="items.onlineStatus==0?'on':'off'"
										v-if="items.onlineStatus && (item.title == '车辆' || item.title == '人员')">
										{{items.onlineStatus==0?'在线':items.onlineStatus==1?'离线':'无设备'}}
									</div>
									<div class="search-result-item-icon" :class="items.faclStatus=='正常'?'on':'off'"
										v-if="items.faclStatus && (item.title == '公厕' || item.title == '中转站' || item.title == '园林绿化' || item.title == '名木古树' || item.title == '垃圾桶' || item.title == '收集点')">
										{{items.faclStatus}}
									</div>
									<Icon custom="i-icon icon-jiantou2" size="18" class="cursor-pointer"
										@click.stop="onClickSearchDetail(items)" />
									<div class="search-result-item-item-img" v-if="item.children.length-1!=indexs">
										<img src="../../../../assets/new/new_img_line.png">
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</MyCollapse>

		<MyCollapse v-model="accountMenuVisible" :custom-style="{top: '75px',right: '-2px'}">
			<div class="menu menu-right">
				<div class="menu-item" @click.stop="onClickRemind">
					<Icon custom="i-icon icon-xiaoxishezhi" size="16" />
					<span>提醒设置</span>
				</div>
				<div class="menu-item" @click.stop="onClickLoginOut">
					<Icon custom="i-icon icon-tuichu" size="16" />
					<span>退出</span>
				</div>
			</div>
		</MyCollapse>
		<MyCollapse v-model="addQuestMenuVisible"
			:custom-style="{top: '75px',right: currentTabbarIndex==6?'90px':'100px'}">
			<div class="menu">
				<div class="menu-item" @click.stop="onClickAssign">
					<Icon custom="i-icon icon-wentizhipai" size="16" />
					<span>问题指派</span>
				</div>
				<!-- 2021-10-09样式未调好 -->
				<div class="menu-item" @click.stop="onClickEmergencyPlan">
					<Icon custom="i-icon icon-wentizhipai" size="16" />
					<span>下发应急计划</span>
				</div>
			</div>
		</MyCollapse>
		<MyCollapse v-model="adminMenuVisible" :custom-style="{top: '97px',right: '7px'}">
			<div class="adminMenu"
				:class="{'adminMenuSmall':adminMenuArr.length>0&&adminMenuArr.length<5&&adminMenuArr[0].name=='main'||adminMenuArr.length<4}">
				<div class="adminMenu-nav">
					<div class="adminMenu-nav-title" v-for="(item,index) in adminMenuArr" :key="index"
						@click.stop="onClickAdminMenuItem(item)">{{item.title}}</div>
				</div>
				<div class="adminMenu-det">
					<div class="adminMenu-item" v-for="(item,index) in adminMenuArr" :key="index">
						<ul>
							<li v-for="(items,indexs) in item.children" :key="indexs"
								@click.stop="onClickAdminMenuItem(items)">
								{{items.title}}
							</li>
							<!-- <template v-if="index===0">
					  <div class="adminMenu-item-line"></div>
					  <li @click.stop="navToVideoSurveillance">视频监控</li>
					</template> -->
						</ul>
					</div>
				</div>
			</div>
		</MyCollapse>
		<Drawer width="410" :closable="false" v-model="noticeVisible" class-name="notice">
			<div class="notice-header" slot="header">
				<div class="notice-header-title">
					<Icon custom="i-icon icon-zuojiantou" size="24" class="cursor-pointer m-r-5"
						@click.stop="returnNoticeList" v-if="noticeDetailVisible" />
					通知记录
				</div>
				<template v-if="!noticeDetailVisible">
					<input v-model="noticeSearchValue" placeholder="请输入姓名" style="width: 180px"
						v-if="noticeSearchVisible" />
					<Icon custom="i-icon icon-guanbi" size="24" class="cursor-pointer"
						@click.stop="noticeSearchVisible=false" v-if="noticeSearchVisible" />
					<Icon custom="i-icon icon-sousuo1" size="24" class="cursor-pointer"
						@click.stop="noticeSearchVisible=true" v-else />
				</template>
			</div>
			<ul class="notice-list" v-if="!noticeDetailVisible">
				<li v-for="(item,index) in noticeArr" :key="index" @click.stop="onClickNoticeItem(item)">
					<img :src="item.avatar||defaultAvatar">
					<div class="flex-1">
						<p class="line1">{{item.title}}</p>
						<p class="line1">{{item.content}}</p>
					</div>
					<div class="notice-date">{{item.date}}</div>
				</li>
			</ul>
			<div class="notice-detail" v-else>
				<div class="notice-detail-top">
					<img :src="noticeDetail.avatar||defaultAvatar">
					<div class="flex-1">
						<p>{{noticeDetail.title}}</p>
					</div>
				</div>
				<div class="notice-detail-con">{{noticeDetail.content}}</div>
			</div>
		</Drawer>
		<Modal v-model="remindVisible" width="460" :closable="false" footer-hide>
			<div class="remindModal">
				<div class="remindModal-top">
					<div class="remindModal-top-name">
						<div>
							事件提醒
						</div>
						<img src="../../../../assets/new/new_close.png" @click.stop="remindVisible = !remindVisible">
					</div>
					<div class="remindModal-top-time">
						<div class="flex a-center">
							<div class="remindModal-top-title">
								<span style="color: #B91F1F;" class="m-r-8">*</span>提醒时长:
							</div>
							<input type="text" v-model="remindTime" class="remindModal-top-input">
							<span>秒</span>
							<Icon custom="i-icon icon-jingshi" size="16" color="#faad14" class="m-l-20 m-r-10" />
							<span style="font-weight: 400;">最多120秒</span>
						</div>
						<div class="flex a-center m-t-10" style="color: #CCCCCC;">
							<div class="remindModal-top-title">
								显示条数:
							</div>
							<RadioGroup v-model="remindNumber" button-style="solid" class="m-l-12"
								style="margin-top: 1px;">
								<Radio :label="1" size="large">1条</Radio>
								<Radio :label="2" size="large">2条</Radio>
								<Radio :label="3" size="large">3条</Radio>
							</RadioGroup>
						</div>
					</div>
				</div>
				<div class="remindModal-list noScroll">
					<div class="remindModal-item" v-for="(item,index) in remindArr" :key="index">
						<div class="m-b-28">
							{{item.title}}
						</div>
						<template v-for="items in item.children">
							<Checkbox v-model="items.checked" :key="items.id" class="remindModal-item-check">
								{{items.name}}</Checkbox>
						</template>
					</div>
				</div>
				<div class="remindModal-btn">
					<div class="remindModal-btn-left" @click.stop="onClickRemindCancel">
						取消
					</div>
					<div class="remindModal-btn-right" @click.stop="onClickRemindConfirm">
						确定
					</div>
				</div>
			</div>
		</Modal>
		<!-- 问题指派弹框 -->
		<Modal v-model="assignVisible" :closable="false" footer-hide :mask-closable="false" width="450">
			<div class="assignModal">
				<div class="assignModal-name">
					<div class="assignModal-name-txt">
						问题指派
					</div>
					<img src="../../../../assets/new/new_close.png" @click.stop="assignVisible = !assignVisible">
				</div>
				<ul class="assignModal-ul">
					<li class="assignModal-item">
						<div class="assignModal-key">问题类型：</div>
						<Cascader :data="questTypeArr" v-model="questType" placeholder="" class="flex-1"
							style="height: 30px;"></Cascader>
					</li>
					<li class="assignModal-item">
						<div class="assignModal-key">位置：</div>
						<Input v-model="address" placeholder="" readonly class="flex-1">
						<Icon custom="i-icon icon-weizhishi" size="16" color="#fFF" class="cursor-pointer" slot="suffix"
							style="line-height: 30px;" @click="onClickSite" />
						</Input>
					</li>
					<li class="assignModal-item">
						<div class="assignModal-key">紧急程度：</div>
						<Select v-model="workOrderLevel" class="flex-1" @on-change="onChangeWorkOrderLevel">
							<Option v-for="item in workOrderLevelArr" :value="item.casesetLevelId"
								:key="item.casesetLevelId">{{ item.name }}</Option>
						</Select>
						<div class="assignModal-key">限时：</div>
						<Input v-model="timeLimit" placeholder="" class="flex-1">
						</Input>
					</li>
					<li class="assignModal-item assignModal-myTree a-center" style="margin-bottom: 5px;">
						<div class="assignModal-key">指派对象：</div>
						<div class="flex a-center flex-1">
							<div class="assignModal-user" style="margin-bottom: 0;" v-if="assignPerson.name">
								<img src="../../../../assets/new/new_work_2.png">
								{{assignPerson.name}}
								<Icon custom="i-icon icon-guanbi" size="12" class="cursor-pointer"
									@click.stop="onClickDeletePerson" />
							</div>
							<MyTreeSelect ref="treeSelect" :data="personTreeData" search
								@onSelectChange="onChangePerson" v-if="!assignPerson.name">
								<img src="../../../../assets/new/new_img_add.png" class="assignModal-add">
								<!-- <Icon custom="i-icon icon-head_tianjia" size="16" class="cursor-pointer"
									v-show="!(automatic || platformAssign)" /> -->
							</MyTreeSelect>
						</div>
						<Checkbox v-model="automatic" style="font-size: 12px;">自动指派</Checkbox>
						<Checkbox @on-change="platformAssignChange" v-model="platformAssign" :disabled="automatic"
							style="font-size: 12px;margin-right: 0;">平台分派
						</Checkbox>
					</li>
					<li class="assignModal-item a-center">
						<div class="assignModal-key">抄送人：</div>
						<div class="flex a-center flex-1 flex-wrap" style="height: 48px;overflow: auto;">
							<div class="assignModal-user" v-for="(item,index) in copyPersonArr" :key="item.id">
								<img src="../../../../assets/new/new_work_2.png">
								<span>{{item.name}}</span>
								<Icon custom="i-icon icon-guanbi" size="16" class="cursor-pointer"
									@click="onClickDeleteCopuPerson(index)" />
							</div>
							<MyTreeSelect ref="treeSelect" :data="personTreeData" search checked
								@onCheckChange="onChangeCopyPerson">
								<img src="../../../../assets/new/new_img_add.png" class="assignModal-add">
								<!-- <Icon custom="i-icon icon-head_tianjia" size="16" class="cursor-pointer" /> -->
							</MyTreeSelect>
						</div>
					</li>
					<li class="assignModal-item">
						<div class="assignModal-key">描述：</div>
						<Input type="textarea" v-model="des" :autosize="{ minRows: 6, maxRows: 6 }"
							placeholder="作业现场描述">
						</Input>
					</li>
					<li class="assignModal-item" style="margin-bottom: 12px;">
						<div class="assignModal-key">多媒体：</div>
						<div class="flex-1">
							<ul class="file-img assignModal-item-list">
								<li v-for="item,index in pictureArr" :key="index">
									<el-image :src="item" fit="cover" :preview-src-list="pictureArr"
										class="w-full h-full">
									</el-image>
									<Icon type="md-close-circle" size="24" color="#fa5357" class="file-img-deleteIcon"
										@click.stop="onClickDeletePicture(index)" />
								</li>
								<UploadFile @uploadSuccess="uploadPicture" multiple v-show="pictureArr.length<9">
									<li>
										<Icon custom="i-icon icon-tupianshangchuan" size="40" color="#B5B5B5" />
									</li>
								</UploadFile>
							</ul>
							<!-- <div class="flex">
                <div class="assignModal-upload">
                  <Icon custom="i-icon icon-tupianshangchuan"
                        size="40" />
                </div>
                <div class="assignModal-upload">
                  <Icon custom="i-icon icon-yuyin"
                        size="40" />
                </div>
                <div class="assignModal-upload">
                  <Icon custom="i-icon icon-shipin"
                        size="40" />
                </div>
              </div> -->
							<!-- <p class="fs-12">图片：最多不能超过5张，最大不能超过1M；音频：支持格式为mp3，最大不能超过10M；视频：支持格式为mp4，最大不能超过10M；</p> -->
							<!-- <p class="fs-12">图片：最多不能超过5张，最大不能超过1M；</p> -->
						</div>
					</li>
				</ul>
				<div class="assignModal-btn">
					<Button class="assignModal-btn-left" @click.stop="onClickCancel">
						取消
					</Button>
					<Button class="assignModal-btn-right" type="primary" :loading="loading"
						@click.stop="onClickQuestAssign">
						确定
					</Button>
				</div>
			</div>
		</Modal>
		<!-- 问题指派 => 位置按钮点击弹框 -->
		<NewPositionModal v-model="positionVisible" @onClickConfirm="onChangeSite" />
		<!-- 车辆 搜索详情 -->
		<NewSearchCarDetail></NewSearchCarDetail>

		<!-- 人员 搜索详情 -->
		<NewSearchPersonDetail></NewSearchPersonDetail>

		<!-- 公厕 搜索详情 -->
		<NewSearchToiletDetail></NewSearchToiletDetail>

		<!-- 中转站 搜索详情 -->
		<NewSearchTransferDetail></NewSearchTransferDetail>

		<!-- 垃圾桶搜索详情 -->
		<NewSearchTrashDetail></NewSearchTrashDetail>

		<!-- 网格搜索详情 -->
		<MainSearchGridDetail></MainSearchGridDetail>

		<!-- 园林搜索详情 -->
		<NewSearchGardenDetail></NewSearchGardenDetail>

		<!-- 古树搜索详情 -->
		<NewSearchTreeDetail></NewSearchTreeDetail>

		<!-- 收集点搜索详情 -->
		<NewSearchCollectDetail></NewSearchCollectDetail>

		<!-- 井盖搜索详情 -->
		<NewSearchManholeDetail></NewSearchManholeDetail>

		<!-- 下发计划 -->
		<NewPlan class="emergency-plan" :width="715" v-model="emergencyDispatchPlanVisible" sourceType="map"
			:dataId.sync="emergencyDispatchPlanId" :resPlanId.sync="emergencyDispatchResPlanId">
		</NewPlan>
		
		
	</div>
</template>

<script>
	import {
		mapGetters,
		mapActions
	} from 'vuex'
	import bus from '@/utils/bus'
	import {
		debounce
	} from '@/utils/debounceAndThrottle';
	import MainSearchDetail from '../template/MainSearchDetail.vue';
	import MainSearchCarDetail from '../template/MainSearchCarDetail.vue';
	import MainSearchTransferDetail from '../template/MainSearchTransferDetail.vue';
	import MainSearchTrashDetail from '../template/MainSearchTrashDetail.vue';
	import MainSearchGridDetail from '../template/MainSearchGridDetail.vue';
	import MainSearchGardenDetail from '../template/MainSearchGardenDetail.vue';
	import MainSearchTreeDetail from '../template/MainSearchTreeDetail.vue';
	import MainSearchToiletDetail from '../template/MainSearchToiletDetail.vue';
	import MainSearchPersonDetail from '../template/MainSearchPersonDetail.vue';
	import MainSearchCollectDetail from '../template/MainSearchCollectDetail.vue';
	import MyCollapse from '../../../common/MyCollapse';
	import MyTreeSelect from '@/components/common/MyTreeSelect';
	import PositionDialog from '../template/PositionModal.vue'
	import UploadFile from '@/components/common/UploadFile'
	import InfiniteLoading from 'vue-infinite-loading';
	import EmergencyDispatchPlanModal from '@/components/product/admin/modal/patrolMaintain/EmergencyDispatchPlanModal'
	import NewAniBorder from './NewAniBorder.vue'
	import NewPositionModal from './NewPositionModal.vue'
	import NewPlan from './NewPlan.vue'
	import NewSearchToiletDetail from './NewSearchToiletDetail.vue'
	import NewSearchTrashDetail from './NewSearchTrashDetail.vue';
	import NewSearchTreeDetail from './NewSearchTreeDetail.vue';
	import NewSearchTransferDetail from './NewSearchTransferDetail.vue';
	import NewSearchGardenDetail from './NewSearchGardenDetail.vue';
	import NewSearchCollectDetail from './NewSearchCollectDetail.vue';
	import NewSearchPersonDetail from './NewSearchPersonDetail.vue';
	import NewSearchCarDetail from './NewSearchCarDetail.vue';
	import NewSearchManholeDetail from './NewSearchManholeDetail.vue';
	export default {
		components: {
			PositionDialog,
			MainSearchDetail,
			MainSearchCarDetail,
			MainSearchTransferDetail,
			MainSearchTrashDetail,
			MainSearchGridDetail,
			MainSearchGardenDetail,
			MainSearchTreeDetail,
			MainSearchToiletDetail,
			MainSearchPersonDetail,
			MainSearchCollectDetail,
			MyCollapse,
			MyTreeSelect,
			UploadFile,
			InfiniteLoading,
			EmergencyDispatchPlanModal,
			NewAniBorder,
			NewPositionModal,
			NewPlan,
			NewSearchToiletDetail,
			NewSearchTrashDetail,
			NewSearchTreeDetail,
			NewSearchTransferDetail,
			NewSearchGardenDetail,
			NewSearchCollectDetail,
			NewSearchPersonDetail,
			NewSearchCarDetail,
			NewSearchManholeDetail,
		},
		data() {
			return {
				// navbar
				accountMenuVisible: false,
				addQuestMenuVisible: false,
				adminMenuVisible: false,
				noticeVisible: false,
				noticeSearchValue: '',
				noticeSearchVisible: false,
				defaultAvatar: require('../../../../assets/main/default_avatar.png'),
				// 通知
				noticeArr: [{
					title: '测试标题',
					content: '测试内容',
					date: '04-30'
				}, {
					title: '测试标题',
					content: '测试内容',
					date: '04-30'
				}, {
					title: '测试标题',
					content: '测试内容',
					date: '04-30'
				}, ],
				noticeDetailVisible: false,
				noticeDetail: null,
				// 提醒设置
				remindVisible: false,
				remindTime: 30,
				remindNumber: 1,
				remindArr: [{
						title: '事件工单',
						children: [{
								id: 'eventPublicComplaints',
								name: '公众投诉',
								checked: false
							},
							{
								id: 'eventConstructionOpinion',
								name: '建设意见',
								checked: false
							},
							{
								id: 'eventInspectReport',
								name: '巡查上报',
								checked: false
							},
							{
								id: 'eventProblemOverseeing',
								name: '问题督办',
								checked: false
							},
							{
								id: 'eventMaintenanceReport',
								name: '维修上报',
								checked: false
							},
						]
					},
					{
						title: '车辆报警',
						children: [{
								id: 'carAlarmFatigueDriving',
								name: '疲劳驾驶',
								checked: false
							},
							{
								id: 'carAlarmPowerOff',
								name: '电源掉电',
								checked: false
							},
							{
								id: 'carAlarmPowerSupplyVoltage',
								name: '电源欠压',
								checked: false
							},
							{
								id: 'carAlarmSpill',
								name: '漏油',
								checked: false
							},
							{
								id: 'carAlarmOverSpeed',
								name: '超速',
								checked: false
							},
							{
								id: 'carAlarmOffline',
								name: '离线',
								checked: false
							},
							{
								id: 'carAlarmLocateFailure',
								name: '定位失败',
								checked: false
							},
							{
								id: 'carAlarmDrivingTimeout',
								name: '驾驶超时',
								checked: false
							},
							{
								id: 'carAlarmOutTheArea',
								name: '出区域',
								checked: false
							},
							{
								id: 'carAlarmIntoTheArea',
								name: '进区域',
								checked: false
							},
						]
					},
					{
						title: '人员报警',
						children: [{
								id: 'personAlarmSos',
								name: 'sos求救',
								checked: false
							},
							{
								id: 'personAlarmLowPower',
								name: '设备低电',
								checked: false
							},
							{
								id: 'personAlarmOffline',
								name: '离线',
								checked: false
							},
							{
								id: 'personAlarmLocateFailure',
								name: '定位失败',
								checked: false
							},
							{
								id: 'personAlarmOutTheArea',
								name: '出区域',
								checked: false
							},
							{
								id: 'personAlarmIntoTheArea',
								name: '进区域',
								checked: false
							},
						]
					},
					{
						title: '车辆违规',
						children: [{
								id: 'carViolationOverSpeed',
								name: '超速报警',
								checked: false
							},
							{
								id: 'carViolationYawing',
								name: '偏航',
								checked: false
							},
							{
								id: 'carViolationSpeedLimit',
								name: '速度限制',
								checked: false
							},
							{
								id: 'carViolationWorkTimeout',
								name: '出车超时',
								checked: false
							},
							{
								id: 'carViolationArriveLate',
								name: '晚到',
								checked: false
							},
							{
								id: 'carViolationWaterMonitor',
								name: '水量监测',
								checked: false
							},
							{
								id: 'carViolationOilMonitor',
								name: '油量监测',
								checked: false
							},
							{
								id: 'carViolationLeavePost',
								name: '离岗',
								checked: false
							},
							{
								id: 'carViolationClearTimeout',
								name: '清运超时',
								checked: false
							},
							{
								id: 'carViolationWorkRemain',
								name: '作业遗留',
								checked: false
							},
							{
								id: 'carViolationStay',
								name: '停留',
								checked: false
							},
							{
								id: 'carViolationDriveEmpty',
								name: '空驶',
								checked: false
							},
							{
								id: 'carViolationIllegalDump',
								name: '非法倾倒',
								checked: false
							},
							{
								id: 'carViolationTimeoutUnfinished',
								name: '超时未完成',
								checked: false
							},
							{
								id: 'carViolationNotArrivePost',
								name: '未到岗',
								checked: false
							},
						]
					},
					{
						title: '人员违规',
						children: [{
								id: 'personViolationStay',
								name: '人员停留',
								checked: false
							},
							{
								id: 'personViolationTogether',
								name: '人员聚众',
								checked: false
							},
							{
								id: 'personViolationLeavePost',
								name: '人员离岗',
								checked: false
							},
						]
					},
					{
						title: '垃圾桶报警',
						children: [{
								id: 'trashAlarmSlope',
								name: '倾斜报警',
								checked: false
							},
							{
								id: 'trashAlarmTemperature',
								name: '温度报警',
								checked: false
							},
							{
								id: 'trashAlarmOverflowing',
								name: '满溢报警',
								checked: false
							},
							{
								id: 'trashAlarmCleanTimeout',
								name: '超时未清',
								checked: false
							},
						]
					},
					{
						title: '设施报警',
						children: [{
								id: 'facilityAlarmPmTwopointfive',
								name: 'PM2.5',
								checked: false
							},
							{
								id: 'facilityAlarmPmTen',
								name: 'PM10',
								checked: false
							},
							{
								id: 'facilityAlarmSmoke',
								name: '烟雾报警',
								checked: false
							},
							{
								id: 'facilityAlarmWaterExpend',
								name: '水耗报警',
								checked: false
							},
							{
								id: 'facilityAlarmElectricityExpend',
								name: '电耗报警',
								checked: false
							},
							{
								id: 'facilityAlarmOverflowing',
								name: '满溢报警',
								checked: false
							},
							{
								id: 'facilityAlarmTemperature',
								name: '温度报警',
								checked: false
							},
							{
								id: 'facilityAlarmSlope',
								name: '倾斜报警',
								checked: false
							},
							{
								id: 'facilityAlarmCleanTimeout',
								name: '超时未清',
								checked: false
							},
						]
					},
					{
						title: '井盖报警',
						children: [{
								id: 'manholeAlarmOpening',
								name: '开盖报警',
								checked: false
							},
							{
								id: 'manholeAlarmWaterLevel',
								name: '水位报警',
								checked: false
							},
							{
								id: 'manholeAlarmPatrolReminder',
								name: '巡检提醒',
								checked: false
							}
						]
					}
				],
				remindLoading: false,
				// 问题指派
				assignVisible: false,
				// 下发计划
				emergencyDispatchPlanVisible: false,
				emergencyDispatchPlanId: '',
				emergencyDispatchResPlanId: '',

				questType: [],
				positionVisible: false,
				lng: '',
				lat: '',
				address: '',
				imgUrl: '',
				personId: '',
				workOrderLevel: '',
				timeLimit: 0,
				assignUser: '',
				platformAssign: false,
				automatic: false,
				carbonUser: '',
				des: '',
				searchVisible: false,
				searchValue: '',
				searchMenuArr: [{
						title: '车辆',
						img: require('../../../../assets/new/new_nav_1.png'),
						color: '#087ae6',
						bgc: 'rgba(8, 122, 230, 0.2)'
					},
					{
						title: '人员',
						img: require('../../../../assets/new/new_nav_2.png'),
						icon: 'icon-leixing_renyuan',
						color: '#f2993a',
						bgc: 'rgba(242, 153, 58, 0.2)'
					},
					// {
					//   title: '网格',
					//   icon: 'icon-leixing_wangge',
					//   color: '#5397e6',
					//   bgc: 'rgba(83, 151, 230, 0.2)'
					// },
					{
						title: '公厕',
						img: require('../../../../assets/new/new_nav_3.png'),
						icon: 'icon-leixing_cesuo',
						color: '#6881e6',
						bgc: 'rgba(104, 129, 230, 0.2)'
					},
					{
						title: '中转站',
						img: require('../../../../assets/new/new_nav_4.png'),
						icon: 'icon-zhongzhuanzhan1',
						color: '#18ae84',
						bgc: 'rgba(24, 174, 132, 0.2)'
					},
					// 8.3暂时隐藏
					// {
					//   title: '停车场',
					//   icon: 'icon-leixing_tingchezhan',
					//   color: '#d1922f',
					//   bgc: 'rgba(180, 163, 83, 0.2)'
					// },
					{
						title: '园林绿化',
						img: require('../../../../assets/new/new_nav_5.png'),
						icon: 'icon-yuanlinlvdi',
						color: '#18ae84',
						bgc: 'rgba(24, 174, 132, 0.2)'
					},
					{
						title: '名木古树',
						img: require('../../../../assets/new/new_nav_6.png'),
						icon: 'icon-gushumingmu',
						color: '#2cb69c',
						bgc: 'rgba(44, 182, 156, 0.2)'
					},
					{
						title: '垃圾桶',
						img: require('../../../../assets/new/new_nav_7.png'),
						icon: 'icon-leixing_lajitong',
						color: '#6ec38d',
						bgc: 'rgba(136, 203, 160, 0.2)'
					},
					{
						title: '收集点',
						img: require('../../../../assets/new/new_nav_8.png'),
						icon: 'icon-biaoshi_shoujidian',
						color: '#68c6c3',
						bgc: 'rgba(104, 198, 195, 0.2)'
					},
					{
						title: '窨井盖',
						img: require('../../../../assets/new/new_jg.png'),
						icon: 'icon-biaoshi_shoujidian',
						color: '#68c6c3',
						bgc: 'rgba(104, 198, 195, 0.2)'
					}
				],
				searchArr: [],
				searchTotal: 0,
				searchMenuDetailVisible: false,
				searchMenuDetailTitle: '',
				searchMenuDetailDepart: '',
				searchMenuDetailDepartId: '',
				searchMenuDetailTitles: '',
				searchMenuDetailName: '',
				searchMenuDetailType: '',
				searchMenuDetailTypeArr: [],
				carPicture: require('../../../../assets/new/search_car.png'),
				personPhoto: require('../../../../assets/new/new_work_2.png'),
				facilityPicture: require('../../../../assets/main/transferImg.png'),
				trashPicture: require('../../../../assets/new/search_lj.png'),
				toiletPicture: require('../../../../assets/new/new_huanwei_1.png'),
				gardenPicture: require('../../../../assets/new/new_tree_1.png'),
				treePicture: require('../../../../assets/main/ancientTreesImg.png'),
				ybPhoto: require('../../../../assets/new/search_yb.png'),
				ybLightPhoto: require('../../../../assets/new/search_yb_light.png'),
				jgPicture: require('../../../../assets/new/new_jg.png'),
				clPicture: require('../../../../assets/new/new_huanwei_4.png'),
				searchMenuDetailStatus: '',
				searchMenuDetailStatusArr: [],
				searchMenuGridTypeArr: [{
						id: 1,
						name: '区域'
					},
					{
						id: 2,
						name: '线路'
					},
					{
						id: 3,
						name: '路段'
					},
				],
				searchMenuToiletTypeArr: [],
				searchMenuDetailArr: [],
				assignPerson: {}, // 问题指派  指派人
				copyPersonArr: [], // 问题指派  抄送人
				loading: false,
				pictureArr: [],
				totalPage: 1, // 统共页数，默认为1
				pageNum: 1, //当前页数 ，默认为1
				pageSize: 20, // 每页显示数量
				searchMenuDetailAllArr: [],
				popup: ['adminMenuVisible', 'addQuestMenuVisible', 'accountMenuVisible'],
				state:null,
				remindId:'',
				voice:false,
        lTime: new Date().getTime(),// 最后一次点击的时间
        cTime: new Date().getTime(),//当前时间
        timer: null,
			};
		},
		props: {
			currentTabbarIndex: Number,
			width: Number
		},
		watch: {
			// 搜索弹框
			searchMenuDetailVisible(newVal) {
				if (!newVal) {
					this.searchMenuDetailType = ''
					this.searchMenuDetailDepart = ''
					this.searchMenuDetailDepartId = ''
					this.searchMenuDetailStatus = ''
					this.searchMenuDetailArr = []
					this.searchMenuDetailAllArr = []
					this.pageNum = 1
					this.searchMenuDetailTitle = ''
				} else {
					bus.$emit('getAgainGenList')
				}
			},
			// 根据不同的模块 显示不同的搜索
			currentTabbarIndex(newVal) {
				this.searchVisible = false
				switch (newVal) {
					case 0:
						this.searchMenuDetailTitles = []
						this.searchMenuArr = [{
								title: '车辆',
								img: require('../../../../assets/new/new_nav_1.png'),
								color: '#087ae6',
								bgc: 'rgba(8, 122, 230, 0.2)'
							},
							{
								title: '人员',
								img: require('../../../../assets/new/new_nav_2.png'),
								color: '#f2993a',
								bgc: 'rgba(242, 153, 58, 0.2)'
							},
							// {
							//   title: '网格',
							//   icon: 'icon-leixing_wangge',
							//   color: '#5397e6',
							//   bgc: 'rgba(83, 151, 230, 0.2)'
							// },
							{
								title: '公厕',
								img: require('../../../../assets/new/new_nav_3.png'),
								color: '#6881e6',
								bgc: 'rgba(104, 129, 230, 0.2)'
							},
							{
								title: '中转站',
								img: require('../../../../assets/new/new_nav_4.png'),
								color: '#18ae84',
								bgc: 'rgba(24, 174, 132, 0.2)'
							},
							// {
							//   title: '停车场',
							//   icon: 'icon-leixing_tingchezhan',
							//   color: '#d1922f',
							//   bgc: 'rgba(180, 163, 83, 0.2)'
							// },
							{
								title: '园林绿化',
								img: require('../../../../assets/new/new_nav_5.png'),
								color: '#18ae84',
								bgc: 'rgba(24, 174, 132, 0.2)'
							},
							{
								title: '名木古树',
								img: require('../../../../assets/new/new_nav_6.png'),
								color: '#2cb69c',
								bgc: 'rgba(44, 182, 156, 0.2)'
							},
							{
								title: '垃圾桶',
								img: require('../../../../assets/new/new_nav_7.png'),
								color: '#6ec38d',
								bgc: 'rgba(136, 203, 160, 0.2)'
							},
							{
								title: '收集点',
								img: require('../../../../assets/new/new_nav_8.png'),
								color: '#68c6c3',
								bgc: 'rgba(104, 198, 195, 0.2)'
							},
							{
								title: '窨井盖',
								img: require('../../../../assets/new/new_jg.png'),
								icon: 'icon-biaoshi_shoujidian',
								color: '#68c6c3',
								bgc: 'rgba(104, 198, 195, 0.2)'
							}
						]
						break;
					case 1:
						this.searchMenuDetailTitles = ['人员']
						this.searchMenuArr = [{
							title: '人员',
							img: require('../../../../assets/new/new_nav_2.png'),
							color: '#f2993a',
							bgc: 'rgba(242, 153, 58, 0.2)'
						}]
						break;
					case 2:
						this.searchMenuDetailTitles = ['车辆']
						this.searchMenuArr = [{
							title: '车辆',
							img: require('../../../../assets/new/new_nav_1.png'),
							color: '#087ae6',
							bgc: 'rgba(8, 122, 230, 0.2)'
						}, ]
						break;
					case 3:
						this.searchMenuDetailTitles = ['车辆', '垃圾桶', '收集点']
						this.searchMenuArr = [{
								title: '车辆',
								img: require('../../../../assets/new/new_nav_1.png'),
								color: '#087ae6',
								bgc: 'rgba(8, 122, 230, 0.2)'
							},
							{
								title: '垃圾桶',
								img: require('../../../../assets/new/new_nav_7.png'),
								color: '#6ec38d',
								bgc: 'rgba(136, 203, 160, 0.2)'
							},
							{
								title: '收集点',
								img: require('../../../../assets/new/new_nav_8.png'),
								color: '#68c6c3',
								bgc: 'rgba(104, 198, 195, 0.2)'
							}
						]
						break;
					case 4:
						this.searchMenuDetailTitles = ['公厕', '中转站','窨井盖']
						this.searchMenuArr = [{
								title: '公厕',
								img: require('../../../../assets/new/new_nav_3.png'),
								color: '#6881e6',
								bgc: 'rgba(104, 129, 230, 0.2)'
							},
							{
								title: '中转站',
								img: require('../../../../assets/new/new_nav_4.png'),
								color: '#18ae84',
								bgc: 'rgba(24, 174, 132, 0.2)'
							},
							{
								title: '窨井盖',
								img: require('../../../../assets/new/new_jg.png'),
								icon: 'icon-biaoshi_shoujidian',
								color: '#68c6c3',
								bgc: 'rgba(104, 198, 195, 0.2)'
							}
						]
						break;
					case 5:
						this.searchMenuDetailTitles = ['园林绿化', '名木古树']
						this.searchMenuArr = [{
								title: '园林绿化',
								img: require('../../../../assets/new/new_nav_5.png'),
								color: '#18ae84',
								bgc: 'rgba(24, 174, 132, 0.2)'
							},
							{
								title: '名木古树',
								img: require('../../../../assets/new/new_nav_6.png'),
								color: '#2cb69c',
								bgc: 'rgba(44, 182, 156, 0.2)'
							},
						]
						break;
					default:
						break;
				}
			},
			// 搜索弹框是否显示
			searchVisible(newVal) {
				if (!newVal) {
					this.searchValue = ''
					this.searchMenuDetailVisible = false
          clearInterval(this.timer)
				} else {
          this.timer = setInterval(() => {
            this.cTime = new Date().getTime();
            if ((this.cTime - this.lTime) > 15000) {
              this.searchVisible = false
            }
          }, 1000);
        }
			},
			// 搜索环卫要素名称的input
			searchValue(newVal) {
				if (newVal) {
					this.searchTotal = 0
					this.searchMenuDetailName = newVal.replace(/\s*/g, '')
					this.getInputSearchList()
				} else {
					this.searchArr = []
					this.searchTotal = 0
					this.searchMenuDetailName = ''
				}
			},
			// 搜索弹框的标题
			searchMenuDetailTitle(newVal) {
				if (newVal == '车辆' || newVal == '人员') {
					if (this.currentTabbarIndex == 1 || this.currentTabbarIndex == 2 || this.currentTabbarIndex == 3) {
						this.searchMenuDetailStatusArr = [{
								id: 99,
								name: '全部'
							},
							{
								id: 0,
								name: '在线'
							},
							{
								id: 1,
								name: '离线'
							},
							{
								id: 2,
								name: '无设备'
							}
						]
					} else {
						this.searchMenuDetailStatusArr = [{
								id: 99,
								name: '全部'
							},
							{
								id: 0,
								name: '在线'
							},
							{
								id: 1,
								name: '离线'
							},
							{
								id: 2,
								name: '无设备'
							},
							{
								id: 3,
								name: '排班'
							},
						]
					}
				} else {
					this.searchMenuDetailStatusArr = [{
							id: 99,
							name: '全部'
						},
						{
							id: '正常',
							name: '正常'
						},
						{
							id: '废弃',
							name: '废弃'
						},
						{
							id: '维修',
							name: '维修'
						},
						{
							id: '拆除',
							name: '拆除'
						},
						{
							id: '暂停',
							name: '暂停'
						},
					]
				}
			},
			// 问题指派弹框
			assignVisible(newVal) {
				if (!newVal) {
					this.resetAssignData()
				}
			},
		},
		computed: {
			...mapGetters({
				'account': 'getAccount',
				'departmentTreeArr': 'getDepartmentTreeList',
				'personTreeData': 'getUserTreeList',
				'workOrderLevelArr': 'getWorkOrderLevelAllList',
				'eventRemindTime': 'getEventRemindTime',
				'eventRemindNumber': 'getEventRemindNumber',
			}),
			adminMenuArr() {
				let menuArr = this.$store.getters.getMenuArr
				let arr = menuArr.filter(item => item.name !== 'main' && item.name !== 'videoSurveillance')
				return arr
			},
			questTypeArr() {
				let arr = this.$store.getters.getWorkOrderQuestTypeTreeList.map(item => {
					let obj = {
						value: item.id,
						label: item.name,
					}
					if (item.children && item.children.length != 0) {
						obj.children = item.children.map(items => {
							return {
								value: items.id,
								label: items.name
							}
						})
					}
					return obj
				})
				return arr
			},
			widthSelect(){
				let num;
				if(this.currentTabbarIndex==6&&this.adminMenuArr.length>0||this.currentTabbarIndex!=6&&this.adminMenuArr.length==0){
					num = 100
				}else if(this.currentTabbarIndex==6&&this.adminMenuArr.length==0){
					num = 60
				}else if(this.currentTabbarIndex!=6&&this.adminMenuArr.length>0){
					num = 140
				}
				return num
			}
		},
		mounted() {
			this.init()
		},
		destroyed() {
			bus.$off('hideSearch')
			bus.$off('hideNavbar')
		},
		methods: {
			...mapActions([
				'updateDepartmentTreeList',
				'updateUserTreeList',
				'updateWorkOrderQuestTypeTreeList',
				'updateWorkOrderLevelAllList',
				'updateCarTypeAllList',
				'updateWorkTypeAllList'
			]),
			init() {
        this.updateDepartmentTreeList()
				this.updateUserTreeList()
				this.updateWorkOrderQuestTypeTreeList()
				this.updateWorkOrderLevelAllList()
				this.updateCarTypeAllList()
				this.updateWorkTypeAllList()
        bus.$on('onMouseDownPage', data => {
          this.lTime = data
        })
				bus.$on('onSearchMenuType', data => {
					this.getSearchMenuList(data)
				})
				bus.$on('distributionPlan', data => {
					this.onClickEmergencyPlan(data)
				})
				bus.$on('hideSearch', () => {
					this.searchVisible = false
				})
				bus.$on('hideNavbar', () => {
					this.popup.forEach(item => {
						if (this[item]) {
							this[item] = false
						}
					})
				})
			},
			// 弹窗控制 防止多个弹窗同时显示
			popClose(type) {
				this.popup.forEach(item => {
					if (item == type) {
						return false
					}
					this[item] = false
				})
			},
			// 获取设施类型 下拉框
			getSearchMenuFaclType() {
				let arr = [{
					id: 0,
					name: '全部'
				}]
				this.$http.getFacilityBigTypeAllList({
					type: 'facl'
				}).then(res => {
					if (res.code === 200) {
						let name = res.result.find(item => {
							return item.name == this.searchMenuDetailTitle
						})
						this.$http.getFacilitySmallTypeAllList({
							facilitietypeid: name.id
						}).then(res => {
							if (res.code === 200) {
								this.searchMenuDetailTypeArr = arr.concat(res.result)
							}
						})
					}
				})
			},
			// 获取园林 绿树类型 下拉框
			getSearchMenuTreeType() {
				let arr = [{
					id: 0,
					name: '全部'
				}]
				this.$http.getFacilityBigTypeAllList({
					type: 'tree'
				}).then(res => {
					if (res.code === 200) {
						let name = res.result.find(item => {
							return item.name == this.searchMenuDetailTitle
						})
						this.$http.getFacilitySmallTypeAllList({
							facilitietypeid: name.id
						}).then(res => {
							if (res.code === 200) {
								this.searchMenuDetailTypeArr = arr.concat(res.result)
							}
						})
					}
				})
			},
			// 点击选择地址
			onClickSite() {
				this.positionVisible = true
			},
			// 修改地址
			onChangeSite(e) {
				this.address = e.address
				this.lng = e.lng
				this.lat = e.lat
			},
			// 紧急程度
			onChangeWorkOrderLevel(i) {
				if (i) {
					this.timeLimit = this.workOrderLevelArr[i - 1].time;
				}
			},
			// 上传照片
			uploadPicture(arr) {
				if (arr.length > 0) {
					this.pictureArr = this.pictureArr.concat(arr.map(item => item.url))
				}
			},
			// 删除照片
			onClickDeletePicture(index) {
				this.pictureArr.splice(index, 1)
			},
			// 问题指派
			onClickQuestAssign() {
				if (this.questType.length == 0) return this.$Message.info('请选择问题类型');
				if (!this.lng || !this.lat) return this.$Message.info('请选择地址');
				if (!this.automatic) {
					if (!this.assignPerson.name && !this.platformAssign) return this.$Message.info('请选择分派人员');
				}
				if (this.workOrderLevel == 0) return this.$Message.info('请选择紧急程度');
				if (!this.timeLimit) return this.$Message.info('请输入限时');
				if (this.automatic) {
					// 自动指派时调用自动指派的接口   新建时无caseId，需修改接口，2021年10月6日
					this.$http.automaticAssignPatrolCase({
						lng: this.lng,
						lat: this.lat,
					}).then(res => {
						let data = res.result
						if (!data.value) {
							this.automatic = false
							this.$Message.info('暂无指派人可用')
						} else {
							this.assignPerson = {
								id: data.value,
								name: data.name,
							}
							this.assignPatrolCase()
						}
					})
				} else {
					this.assignPatrolCase()
				}
			},
			assignPatrolCase() {
				let CCId = []
				let CC = []
				this.copyPersonArr.forEach(item => {
					CCId.push(item.id)
					CC.push(item.name)
				})
				let params = {
					questBigType: this.questType[0],
					questSmallType: this.questType[1],
					site: this.address,
					lng: this.lng,
					lat: this.lat,
					assignId: this.assignPerson ? this.assignPerson.id : '',
					assign: this.assignPerson ? this.assignPerson.name : '',
					platformAssign: this.platformAssign ? 1 : 0,
					level: this.workOrderLevel,
					time: this.timeLimit,
					CCId: CCId.join(),
					CC: CC.join(),
					desc: this.des,
					picture: this.pictureArr.join()
				}
				this.loading = true
				this.$store.dispatch('createOrEditPatrolCase', params).then(res => {
					this.loading = false
					this.assignVisible = !this.assignVisible
				}).catch(err => {
					this.loading = false
				})
			},
			// 问题指派取消按钮
			onClickCancel() {
				this.assignVisible = !this.assignVisible
			},
			// 问题指派关闭弹窗时，清空数据
			resetAssignData() {
				this.questType = []
				this.address = ''
				this.lng = ''
				this.lat = ''
				this.assignPerson = {}
				this.platformAssign = false
				this.automatic = false
				this.workOrderLevel = ''
				this.timeLimit = 0
				this.copyPersonArr = []
				this.des = ''
				this.pictureArr = []
			},
			// 点击搜索icon
			onClickSearch() {
				this.adminMenuVisible = false
				this.addQuestMenuVisible = false
				this.searchVisible = !this.searchVisible
				bus.$emit('searchType', this.searchVisible)
				bus.$emit('hideMapInfoWindow')
			},
			// 点击用户名
			onClickAccount() {
				this.popClose('accountMenuVisible')
				this.accountMenuVisible = !this.accountMenuVisible
				bus.$emit('hideMapInfoWindow')
			},
			// 点击加号
			onClickAddQuest() {
				this.popClose('addQuestMenuVisible')
				this.adminMenuVisible = false
				this.addQuestMenuVisible = !this.addQuestMenuVisible
				bus.$emit('hideMapInfoWindow')
			},
			// 点击菜单icon
			onClickAdminMenu() {
				this.popClose('adminMenuVisible')
				this.addQuestMenuVisible = false
				this.adminMenuVisible = !this.adminMenuVisible
				bus.$emit('hideMapInfoWindow')
			},
			// 点击adminMenu跳转后台
			onClickAdminMenuItem(item) {
				this.$router.push(item.url)
			},
			// 跳转视频监控
			navToVideoSurveillance() {
				const {
					href
				} = this.$router.resolve({
					name: 'videoSurveillance'
				})
				window.open(href, 'videoSurveillance')
			},
			navToShujuSurveillance() {
				const {
					href
				} = this.$router.resolve({
					name: 'largeScreen'
				})
				window.open(href, 'largeScreen')
			},
			// 点击通知记录
			onClickNotice() {
				this.noticeVisible = !this.noticeVisible
			},
			// 点击通知记录item
			onClickNoticeItem(item) {
				this.noticeDetail = item
				this.noticeDetailVisible = true
			},
			// 返回通知记录列表
			returnNoticeList() {
				this.noticeDetail = null
				this.noticeDetailVisible = false
			},
			// 点击提醒设置icon
			onClickRemind() {
				this.getRemindDetail()
				this.remindVisible = true
			},
			// 获取提醒设置
			getRemindDetail() {
				this.remindTime = this.eventRemindTime
				this.remindNumber = this.eventRemindNumber
				this.remindId = this.$store.getters.getEventRemindData.eventToRemindId
				this.remindArr.forEach(item => {
					item.children.forEach(items => {
						items.checked = this.$store.getters.getEventRemindData[items.id] === 1 ? true :
							false
					})
				})
			},
			// 点击提醒设置取消
			onClickRemindCancel() {
				this.remindVisible = false
			},
			// 点击提醒设置确定
			onClickRemindConfirm() {
				let params = {
					timeLength: this.remindTime,
					showNumber: this.remindNumber,
					eventToRemindId:this.remindId
				}
				this.remindArr.forEach(item => {
					item.children.forEach(items => {
						params[items.id] = items.checked ? 1 : 0
					})
				})
				this.remindLoading = true
				this.$http.editMapRemind(params).then(res => {
					this.remindLoading = false
					if (res.code === 200) {
						this.remindVisible = false
						this.$store.dispatch('getMapRemindDetail')
					} else {
						this.$Message.info(res.message)
					}
				}).catch(err => {
					this.remindLoading = false
				})
			},
			// 修改提醒设置
			// 点击退出
			onClickLoginOut() {
				this.$store.dispatch('loginOut')
				this.$router.replace('/login')
			},
			// 点击问题指派icon
			onClickAssign() {
				this.assignVisible = true
			},
			// 点击 下发应急计划 icon
			onClickEmergencyPlan(data) {
				this.emergencyDispatchPlanVisible = true
				if (data.resPlanId) {
					this.emergencyDispatchResPlanId = data.resPlanId
				}
			},
			// 点击搜索菜单item
			onClickSearchMenuItem(item) {
				this.searchMenuDetailTitle = item.title
				this.searchMenuDetailVisible = true
				let arr = [{
					id: 0,
					name: '全部'
				}]
				// 搜索列表中的类型下拉框数据
				if (item.title == '车辆') {
					this.searchMenuDetailTypeArr = arr.concat(this.$store.getters.getCarTypeAllList)
				} else if (item.title == '人员') {
					this.searchMenuDetailTypeArr = arr.concat(this.$store.getters.getWorkTypeAllList)
				} else if (item.title == '网格') {
					this.searchMenuDetailTypeArr = arr.concat(this.searchMenuGridTypeArr)
				} else if (item.title == '公厕' || item.title == '中转站' || item.title == '停车场' || item.title == '收集点') {
					this.getSearchMenuFaclType()
				}
				if (item.title == '园林绿化' || item.title == '名木古树') {
					this.getSearchMenuTreeType()
				}
				if (item.title == '垃圾桶') {
					this.searchMenuDetailType = '垃圾桶'
				}
				this.onSearch()
			},
			// 点击返回搜索菜单
			onClickReturnSearchMenu() {
				this.searchMenuDetailVisible = false
			},
			// 点击搜索item
			onClickSearchMenuDetailItem(item) {
				this.$emit('onClickSearchMenuDetailItem', item.id, item.type);
			},
			// 获取输入框搜索列表
			getInputSearchList: debounce(function() {
				let arr = []
				arr = this.searchMenuArr.map(item => {
					return item.title
				})
				this.$http.getMapSearchList({
					type: arr.join(),
					name: this.searchMenuDetailName
				}).then((res) => {
					if (res.code === 200) {
						this.searchArr = res.result
						res.result.forEach(item => {
							this.searchTotal = this.searchTotal + item.children.length
						})
					} else {
						this.$Message.info(res.message)
					}
				})
			}),
			// 查询
			onSearch() {
				if(this.state){
					this.state.reset()
				}
				this.pageNum = 1
				if (this.searchMenuDetailTitle == '车辆') {
					this.getCarSearchList()
				} else if (this.searchMenuDetailTitle == '人员') {
					this.getPersonSearchList()
				} else {
					this.getFaclSearchList()
				}
			},
			// 获取全部搜索列表
			getSearchList() {
				let params = {
					onlineStatus: '',
					type: this.searchMenuDetailTitle == '垃圾桶' ? '收集点' : this.searchMenuDetailTitle,
					itemType: this.searchMenuDetailType == '全部' ? '' : this.searchMenuDetailType,
					company: this.searchMenuDetailDepart,
					// elementname: this.searchMenuDetailName,
				}
				// 人车在线状态
				if (this.searchMenuDetailStatus == 0 || this.searchMenuDetailStatus == 1 || this.searchMenuDetailStatus ==
					2) {
					params.onlinestatus = this.searchMenuDetailStatus
				}
				// 设施状态
				if (this.searchMenuDetailStatus == '正常' || this.searchMenuDetailStatus == '废弃' || this
					.searchMenuDetailStatus == '维修' || this.searchMenuDetailStatus == '拆除' || this
					.searchMenuDetailStatus == '暂停') {
					params.faclstatus = this.searchMenuDetailStatus
				}
				// shiftStatus 当日排班状态：0已排班1未排班
				if (this.searchMenuDetailStatus == 3) {
					params.shiftStatus = 0
				}
				this.$http.getMapSearchList().then((res) => {
					if (res.code === 200) {
						let data = res.result[0]
						this.searchMenuDetailAllArr = data.children
						// 计算一共有几页
						this.totalPage = Math.ceil(this.searchMenuDetailAllArr.length / this.pageSize)
						// 计算得0时设置为1
						this.totalPage = this.totalPage == 0 ? 1 : this.totalPage
						let begin = (this.pageNum - 1) * this.pageSize
						let end = this.pageNum * this.pageSize
						this.searchMenuDetailArr = this.searchMenuDetailAllArr.slice(begin, end)
						this.pageNum++
					} else {
						this.$Message.info(res.message)
					}
				})
			},
			// 获取人员搜索列表
			getPersonSearchList() {
				let params = {
					onlineStatus: '',
					type: '',
					itemType: this.searchMenuDetailType == '全部' ? '' : this.searchMenuDetailType,
					name: '',
					company: this.searchMenuDetailDepart,
				}
				// 人车在线状态
				if (this.searchMenuDetailStatus == 0 || this.searchMenuDetailStatus == 1 || this.searchMenuDetailStatus ==
					2) {
					params.onlineStatus = this.searchMenuDetailStatus
				}
				// shiftStatus 当日排班状态：0已排班1未排班
				if (this.searchMenuDetailStatus == 3) {
					params.shiftStatus = 0
				}
				if (this.currentTabbarIndex == 1) {
					params.shiftStatus = 0
				}
				this.$http.getMapSearchPersonList(params).then((res) => {
					if (res.code === 200) {
						let data = res.result
						this.searchMenuDetailAllArr = data
						// 计算一共有几页
						this.totalPage = Math.ceil(this.searchMenuDetailAllArr.length / this.pageSize)
						// 计算得0时设置为1
						this.totalPage = this.totalPage == 0 ? 1 : this.totalPage
						let begin = (this.pageNum - 1) * this.pageSize
						let end = this.pageNum * this.pageSize
						this.searchMenuDetailArr = this.searchMenuDetailAllArr.slice(begin, end)
						this.pageNum++
					} else {
						this.$Message.info(res.message)
					}
				})
			},
			// 获取车辆
			getCarSearchList() {
				let params = {
					onlineStatus: '',
					type: '',
					itemType: this.searchMenuDetailType == '全部' ? '' : this.searchMenuDetailType,
					name: '',
					company: this.searchMenuDetailDepart,
				}
				// 人车在线状态
				if (this.searchMenuDetailStatus == 0 || this.searchMenuDetailStatus == 1 || this.searchMenuDetailStatus ==
					2) {
					params.onlineStatus = this.searchMenuDetailStatus
				}
				// shiftStatus 当日排班状态：0已排班1未排班
				if (this.searchMenuDetailStatus == 3) {
					params.shiftStatus = 0
				}
				if (this.currentTabbarIndex == 2 || this.currentTabbarIndex == 3) {
					params.shiftStatus = 0
				}
				// console.log(this.searchMenuDetailType);
				this.$http.getMapSearchCarList(params).then((res) => {
					if (res.code === 200) {
						let data = res.result
						let arr = []
						// jobType 2机械作业 3垃圾清运 4垃圾转运
						// 机械作业只显示机械作业的
						if (this.currentTabbarIndex == 2) {
							data.forEach(item => {
								if (item.jobType == 2) {
									arr.push(item)
								}
							})
							// 垃圾清运只显示垃圾清运的
						} else if (this.currentTabbarIndex == 3) {
							data.forEach(item => {
								if (item.jobType == 3) {
									arr.push(item)
								}
							})
						} else {
							arr = data
						}
						this.searchMenuDetailAllArr = arr
						// 计算一共有几页
						this.totalPage = Math.ceil(this.searchMenuDetailAllArr.length / this.pageSize)
						// 计算得0时设置为1
						this.totalPage = this.totalPage == 0 ? 1 : this.totalPage
						let begin = (this.pageNum - 1) * this.pageSize
						let end = this.pageNum * this.pageSize
						this.searchMenuDetailArr = this.searchMenuDetailAllArr.slice(begin, end)
						this.pageNum++
					} else {
						this.$Message.info(res.message)
					}
				})
			},
			// 获取设施
			getFaclSearchList() {
				let params = {
					onlineStatus: '',
					type: this.searchMenuDetailTitle == '垃圾桶' ? '收集点' : this.searchMenuDetailTitle,
					itemType: this.searchMenuDetailType == '全部' ? '' : this.searchMenuDetailType,
					name: '',
					company: this.searchMenuDetailDepart,
				}
				// 设施状态
				if (this.searchMenuDetailStatus == '正常' || this.searchMenuDetailStatus == '废弃' || this
					.searchMenuDetailStatus == '维修' || this.searchMenuDetailStatus == '拆除' || this
					.searchMenuDetailStatus == '暂停') {
					params.faclStatus = this.searchMenuDetailStatus
				}
				this.$http.getMapSearchFaclList(params).then((res) => {
					if (res.code === 200) {
						console.log(this.pageNum)
						// console.log(res.result)
						let data = res.result
						this.searchMenuDetailAllArr = data
						// 计算一共有几页
						this.totalPage = Math.ceil(this.searchMenuDetailAllArr.length / this.pageSize)
						// 计算得0时设置为1
						this.totalPage = this.totalPage == 0 ? 1 : this.totalPage
						let begin = (this.pageNum - 1) * this.pageSize
						let end = this.pageNum * this.pageSize
						this.searchMenuDetailArr = this.searchMenuDetailAllArr.slice(begin, end)
						this.pageNum++
					} else {
						this.$Message.info(res.message)
					}
				})
			},
			// 获取搜索分页列表
			getSearchPageList($state) {
				this.state = $state
				if (this.pageNum > 1) {
					if (this.pageNum >= this.totalPage) {
						$state.complete()
					}
					let begin = (this.pageNum - 1) * this.pageSize
					let end = this.pageNum * this.pageSize
					this.searchMenuDetailArr = this.searchMenuDetailArr.concat(this.searchMenuDetailAllArr.slice(begin,
						end))
					this.pageNum++
					$state.loaded()
				} else {
					setTimeout(() => {
						$state.loaded()
					}, 200);
				}
			},
			// 点击类型获取搜索列表
			getSearchMenuList(data) {
				this.searchMenuDetailArr = []
				this.searchVisible = true
				this.searchMenuDetailVisible = true
				if (this.searchMenuDetailTitle != data.title) {
					this.searchMenuDetailTitle = data.title
				}
				let arr = [{
					id: 0,
					name: '全部'
				}]
				switch (data.title) {
					case '车辆':
						this.searchMenuDetailTypeArr = arr.concat(this.$store.getters.getCarTypeAllList)
						this.searchMenuDetailType = data.type
						this.searchMenuDetailStatus = data.status
						this.onSearch()
						break;
					case '人员':
						this.searchMenuDetailTypeArr = arr.concat(this.$store.getters.getWorkTypeAllList)
						this.searchMenuDetailType = data.type
						this.searchMenuDetailStatus = data.status
						this.onSearch()
						break;
					case '公厕':
					case '处理站':
					case '窨井盖':
					case '垃圾桶':
					case '收集点':
					case '中转站':
						this.getSearchMenuFaclType()
						this.searchMenuDetailType = data.type
						this.onSearch()
						break;
					case '园林绿化':
					case '名木古树':
						this.$http.getFacilityBigTypeAllList({
							type: 'tree'
						}).then(res => {
							if (res.code === 200) {
								let obj = res.result.find(item => {
									return item.name == this.searchMenuDetailTitle
								})
								this.$http.getFacilitySmallTypeAllList({
									facilitietypeid: obj.id
								}).then(res => {
									if (res.code === 200) {
										this.searchMenuDetailTypeArr = arr.concat(res.result)
										this.searchMenuDetailType = data.type
										this.onSearch()
									}
								})
							}
						})
						break;
					default:
						break;
				}
			},
			// 搜索框选择部门
			onSelectChangeDepaTree(section) {
				this.searchMenuDetailDepartId = section.id
				this.searchMenuDetailDepart = section.name
				this.onSearch()
			},
			// 点击搜索菜单item下的 箭头图标
			onClickSearchDetail(obj) {
				let str = obj.name.split('[')[0]
				switch (obj.type) {
					case '车辆':
						bus.$emit('showMainSearchCarDetail', {
							id: obj.id,
							title: str,
							speed: obj.speed
						})
						break;
					case '人员':
						bus.$emit('showMainSearchPersonDetail', {
							id: obj.id,
							title: str
						})
						break;
					case '公厕':
						bus.$emit('showMainSearchToiletDetail', {
							id: obj.id,
							title: str
						})
						break;
					case '中转站':
						bus.$emit('showMainSearchTransferDetail', {
							id: obj.id,
							title: str
						})
						break;
					case '网格':
						bus.$emit('showMainSearchGridDetail', {
							id: obj.grid_id,
							title: str
						})
						break;
					case '名木古树':
						bus.$emit('showMainSearchTreeDetail', {
							id: obj.id,
							title: str
						})
						break;
					case '收集点':
						if (obj.itemType === '垃圾桶') {
							bus.$emit('showMainSearchTrashDetail', {
								id: obj.id,
								title: str
							})
						} else {
							bus.$emit('showMainSearchCollectDetail', {
								id: obj.id,
								title: str
							})
						}
						break;
					case '园林绿化':
						bus.$emit('showMainSearchGardenDetail', {
							id: obj.id,
							title: str
						})
						break;
					case '窨井盖':
						bus.$emit('showMainSearchManholeDetail', {
							id: obj.id,
							title: str
						})
						break;
					case '处理站':
						bus.$emit('showMainSearchCollectDetail', {
							id: obj.id,
							title: str
						})
						break;
					default:
						break;
				}
			},
			// 点击搜索菜单item下的 摄像头图标
			onClickSearchVideo(item) {
				if (item.videoOnlineStatus == 0) {
					let params = {
						equipcode: item.equipCode,
						eqptype: item.eqpType,
						details: item.tlChannelList,
					}
					bus.$emit('showPlayVideoModal', params)
				}
				// if (item.videoonlinestatus == 1) return
				// let params = {
				//   equipcode: item.equipCode,
				//   eqptype: item.eqpType,
				//   details: item.tlChannelList,
				// }
				// bus.$emit('showPlayVideoModal', params)
			},
			// 轨迹跳转
			onClickTrack(item) {
				if (this.searchMenuDetailTitle == '车辆') {
					const {
						href
					} = this.$router.resolve({
						name: 'newTrack',
						query: {
							type: 'car',
							id: item.id,
							carType: item.itemType,
							name: item.name,
              time: Date.now()
						}
					})
					window.open(href, '_blank')
				} else if (this.searchMenuDetailTitle == '人员') {
					const {
						href
					} = this.$router.resolve({
						name: 'newTrack',
						query: {
							type: 'person',
							id: item.id,
							name: item.name,
							carType: '',
              time: Date.now()
						}
					})
					window.open(href, '_blank')
				}
			},
			// 平台分派
			platformAssignChange(bool) {
				if (bool) {
					this.assignPerson = {};
				}
			},
			// 选择指派人
			onChangePerson(section) {
				if (section.type == 'user') {
					this.assignPerson = section
				}
			},
			// 删除指派人
			onClickDeletePerson() {
				this.assignPerson = {}
			},
			// 选择抄送人
			onChangeCopyPerson(section) {
				if (section.length > 10) {
					this.$Message.info({
						content: '最多选择十个抄送人'
					})
					return
				}
				let arr = []
				section.forEach(item => {
					if (item.type == 'user') {
						arr.push(item)
					}
				})
				this.copyPersonArr = arr
			},
			// 删除抄送人
			onClickDeleteCopuPerson(index) {
				this.copyPersonArr.splice(index, 1)
			},
		},
	}
</script>

<style lang='scss' scoped>
	@import "@/scss/iviewCssReset/modal";
	@import "@/scss/iviewCssReset/drawer";
	@import "@/scss/iviewCssReset/radio";
	@import "@/scss/iviewCssReset/checkbox";
	@import "@/scss/iviewCssReset/select";
	@import "@/scss/iviewCssReset/input";
	@import "@/scss/iviewCssReset/tree";

	.navbar {
		width: 450px;
		position: fixed;
		top: 0;
		right: 12px;
		z-index: 600;

		.con {
			display: flex;
			align-items: center;
			justify-content: flex-end;
			padding-top: 40px;

			.con-left {
				/* width: 145px; */
				height: 40px;
				/* background: url(../../../../assets/new/nav1.png) no-repeat;
				background-size: 100% 100%; */
				display: flex;
				align-items: center;
				justify-content: center;
				margin-right: 12px;

				.con-left-btn {
					color: #eee;
					cursor: pointer;
				}

				.con-left-line {
					width: 1px;
					height: 12px;
					background: #ffffff;
					opacity: 0.5;
					margin: 0 10px;
				}
			}

			.con-shuju {
				display: flex;
				align-items: center;
				justify-content: space-around;
				padding: 0 10px 0 15px;
				margin-right: 10px;

				img {
					width: 20px;
					height: 20px;
					cursor: pointer;
				}

				.con-left-line {
					width: 1px;
					height: 12px;
					background: #ffffff;
					opacity: 0.5;
					/* margin: 0 12px; */
				}
			}

			.con-last {
				/* width: 90px; */
				height: 40px;
				/* background: url(../../../../assets/new/title_2.png) no-repeat;
				background-size: 100% 100%; */
			}

			.con-right-btn {
				color: #eee;
				cursor: pointer;
			}

			.con-right {
				height: 38px;
				color: #eee;
				cursor: pointer;
				/* background: url(../../../../assets/new/new_img_me.png) 0 0 no-repeat;
				background-size: 100% 100%; */
				padding-right: 8px;
				// margin-left: 50px;
				display: flex;
				align-items: center;

				img {
					width: 38px;
					height: 38px;
				}

				span {
					width: 50px;
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
					font-size: 16px;
					margin-right: 8px;
					margin-left: 8px;
				}

				.name {
					width: 40px;
				}
			}
		}

		.menu {
			width: 174px;
			height: 104px;
			background: url(../../../../assets/new/new_Issue.png) 0 0 no-repeat;
			background-size: 100% 100%;
			display: flex;
			flex-direction: column;
			justify-content: center;
			padding: 16px 0 5px 12px;

			.menu-item {
				padding: 0 10px;
				display: flex;
				align-items: center;
				color: rgba(255, 255, 255, 0.7);
				cursor: pointer;

				span {
					margin-left: 8px;
				}
			}

			.menu-item:first-child {
				margin-bottom: 12px;
			}
		}

		.menu-right {
			width: 144px;
			height: 104px;
			background: url(../../../../assets/new/new_Issue_right.png) 0 0 no-repeat;
			background-size: 100% 100%;
		}

		.adminMenu {
			width: 873px;
			min-height: 354px;
			background: url(../../../../assets/new/new_img_354.png) 0 0 no-repeat;
			background-size: 100% 100%;
			color: rgba(255, 255, 255, 0.85);
			font-weight: normal;
			padding: 45px 53px 60px 60px;

			.adminMenu-nav {
				font-size: 14px;
				color: #ffffff;
				font-weight: 500;
				display: flex;
				align-items: center;
				justify-content: space-around;
				opacity: 0.9;
				padding: 18px 0;

				.adminMenu-nav-title {
					width: 80px;
					height: 34px;
					font-size: 14px;
					font-weight: 500;
					background: rgba(1, 174, 255, 0.35);
					border: 1px solid #01aeff;
					border-radius: 4px;
					display: flex;
					align-items: center;
					justify-content: space-around;
				}
			}

			.adminMenu-det {
				font-size: 14px;
				color: #cccccc;
				font-weight: bold;
				display: flex;
				/* padding: 12px 53px 32px 60px; */

				.adminMenu-item {
					flex: 1;
					text-align: center;

					&:not(:last-child) {
						border-right: 1px solid #465a96;
					}

					li {
						line-height: 1;
						cursor: pointer;
						margin-bottom: 20px;
					}

					li:last-child {
						margin-bottom: 0;
					}

					li:hover {
						color: #00baff;
					}

					.adminMenu-item-line {
						width: 56px;
						height: 1px;
						margin: 16px 0px;
						margin-left: 4px;
						background: rgba(255, 255, 255, 0.4);
					}
				}
			}
		}

		.adminMenuSmall {
			width: 492px;
			background: url(../../../../assets/new/new_img_492.png) 0 0 no-repeat;
			background-size: 100% 100%;
		}
	}

	.search {
		text-align: right;

		.search-top {
			width: 362px;
			height: 66px;
			display: inline-flex;
			align-items: center;
			background: url(../../../../assets/new/new_img_search.png) 0 0 no-repeat;
			background-size: 100% 100%;
			border-radius: 6px;
			padding: 0 22px;
			color: #a0a0a0;

			input {
				flex: 1;
				border-left: 1px solid rgba(160, 160, 160, 0.7);
				margin-left: 10px;
				padding-left: 10px;
				color: #a0a0a0;
			}
		}

		.search-menu {
			width: 362px;
			height: 423px;
			background: url(../../../../assets/new/new_img_423.png) 0 0 no-repeat;
			background-size: 100% 100%;
			padding: 60px 20px 0;
			margin-top: -16px;

			.search-menu-item {
				float: left;
				display: flex;
				align-items: center;
				flex-direction: column;
				width: 33.3%;
				font-size: 14px;
				color: #ffffff;
				margin-bottom: 38px;
				cursor: pointer;

				.search-menu-img {
					width: 50px;
					height: 50px;
				}

				span {
					margin-top: 8px;
				}
			}
		}

		.search-menuDetail {
			width: 437px;
			height: 702px;
			background: url(../../../../assets/new/new_img_702.png) 0 0 no-repeat;
			background-size: 100% 100%;
			border-radius: 6px;
			text-align: left;
			margin-top: -10px;
			padding-bottom: 18px;
			overflow: hidden;

			.search-menuDetail-title {
				width: 160px;
				height: 54px;
				color: #fff;
				font-size: 16px;
				font-weight: bold;
				background: url(../../../../assets/new/new_light.png) 0 0 no-repeat;
				background-size: 100% 100%;
				display: flex;
				align-items: center;
				margin-left: 21px;
				margin-top: 37px;

				p {
					display: flex;
					align-items: center;
					cursor: pointer;

					img {
						width: 18px;
						height: 18px;
						margin: 0 8px 0 16px;
					}
				}
			}

			.search-menuDetail-top {
				display: flex;
				justify-content: space-between;
				padding: 30px 26px 20px;
			}

			.search-menuDetail-list::-webkit-scrollbar {
				display: none;
			}

			/* .search-menuDetail-list::-webkit-scrollbar{
				width: 5px;
			}
			.search-menuDetail-list::-webkit-scrollbar-thumb{
				background-color: rgba(255,255,255,.6);
			} */
			.search-menuDetail-list {
				/* height: 65vh; */
				/* width: 420px; */
				height: 480px;
				overflow-y: auto;
				overflow-x: hidden;

				.search-menuDetail-item {
					height: 82px;
					font-size: 16px;
					color: #cccccc;
					font-weight: 500;
					line-height: 1;
					display: flex;
					align-items: center;
					padding: 0 20px 0 26px;
					cursor: pointer;
					position: relative;

					.search-img {
						width: 428px;
						height: 1px;
						font-size: 0;
						text-align: center;
						position: absolute;
						top: 0;
						left: 0;

						img {
							width: 282px;
							height: 1px;
						}
					}

					.search-menuDetail-item-flex {
						height: 48px;
						display: flex;
						flex-direction: column;
						justify-content: space-between;
					}

					.search-menuDetail-img {
						width: 48px;
						height: 48px;
						border-radius: 50%;
						margin-right: 10px;
					}

					.search-menuDetail-icon {
						display: flex;
						align-items: center;

						img {
							width: 24px;
							height: 24px;
						}
					}

					.search-menuDetail-name {
						display: flex;
						align-items: center;

						.search-menuDetail-status {
							display: inline-block;
							border-radius: 4px;
							padding: 4px 5px;
							margin-right: 5px;
							font-size: 14px;
							line-height: 1;
							background-color: rgba(0, 186, 255, 0.35);
							color: #00baff;
						}

						.search-menuDetail-status-no {
							background-color: rgba(132, 145, 158, 0.3);
							color: #84919e;
						}

						.search-menuDetail-cont {
							flex: 1;
						}
					}

					.search-menuDetail-desc {
						display: flex;
						align-items: center;

						img {
							width: 18px;
							height: 18px;
							margin-right: 10px;
						}
					}

					.search-menuDetail-not {
						width: 40px;
						font-size: 14px;
						background-color: rgba(132, 145, 158, 0.3);
						color: #84919e;
						border-radius: 4px;
						text-align: center;
						padding: 4px 0px;
					}
				}
			}
		}

		.search-result {
			width: 360px;
			height: 721px;
			background: url(../../../../assets/new/new_img_721.png) 0 0 no-repeat;
			background-size: 100% 100%;
			text-align: left;

			.search-result-title {
				height: 61px;
				font-size: 16px;
				font-weight: 500;
				display: flex;
				align-items: center;
				justify-content: space-between;
				line-height: 55px;
				color: rgba(255, 255, 255, 0.9);
				padding: 6px 0 0 26px;
				position: relative;

				img {
					width: 160px;
					height: 54px;
					position: absolute;
					left: 6px;
					bottom: 0;
				}
			}

			.search-result-list {
				border-radius: 0 0 12px 12px;
				height: 650px;
				width: 354px;
				overflow: auto;
				overflow-x: hidden;

				.search-result-item {
					.search-result-name {
						width: 350px;
						height: 35px;
						font-size: 14px;
						color: #cccccc;
						background: url(../../../../assets/new/new_img_line_bgc.png) 0 0 no-repeat;
						background-size: 100% 100%;
						display: flex;
						align-items: center;
						justify-content: space-between;
						padding: 0 20px;
						margin-left: 5px;
					}

					.search-result-item-list {
						width: 350px;

						.search-result-item-item {
							width: 350px;
							height: 78px;
							font-size: 14px;
							color: rgba(255, 255, 255, 0.8);
							font-weight: 500;
							display: flex;
							align-items: center;
							margin-bottom: 1px;
							cursor: pointer;
							padding: 0 20px;
							margin-left: 5px;
							position: relative;

							.search-result-item-item-img {
								width: 100%;
								height: 1px;
								font-size: 0;
								text-align: center;
								position: absolute;
								left: 0;
								bottom: 0;

								img {
									width: 282px;
									height: 1px;
								}
							}

							.search-result-item-name {
								margin-bottom: 10px;
							}

							.search-result-item-icon {
								line-height: 1;
								border-radius: 12px;
								font-size: 14px;
								padding: 5px 9px;
								margin-right: 6px;

								&.on {
									background: rgba(0, 186, 255, 0.35);
									border: 1px solid #00baff;
									color: #00baff;
								}

								&.off {
									background: rgba(204, 204, 204, 0.3);
									border: 1px solid #cccccc;
									color: #cccccc;
								}
							}
						}
					}
				}
			}
		}
	}

	.notice {
		.notice-header {
			display: flex;
			align-items: center;
			min-height: 36px;
			height: auto;
			background: rgba(255, 255, 255, 0.1);
			padding: 2px 14px;
			color: #fff;

			.notice-header-title {
				font-size: 14px;
				flex: 1;
				display: flex;
				align-items: center;
			}

			input {
				border: none;
				background: none;
				text-indent: 8px;
				font-size: 12px;
			}
		}

		.notice-list {
			li {
				display: flex;
				align-items: center;
				padding: 20px;
				cursor: pointer;

				img {
					width: 42px;
					height: 42px;
					border-radius: 50%;
					background: #4a4a4a;
					margin-right: 12px;
				}

				p:nth-child(1) {
					color: #fff;
				}

				p:nth-child(2) {
					font-size: 12px;
					color: #bebebe;
					text-overflow: ellipsis;
				}
			}
		}

		.notice-detail {
			.notice-detail-top {
				display: flex;
				align-items: center;
				border-bottom: 1px solid rgba(255, 255, 255, 0.1);
				padding: 18px;

				img {
					width: 42px;
					height: 42px;
					border-radius: 50%;
					background: #4a4a4a;
					margin-right: 12px;
				}

				p {
					font-size: 16px;
					color: #fff;
				}
			}

			.notice-detail-con {
				padding: 18px;
				color: #fff;
				line-height: 20px;
			}
		}
	}

	.remindModal {
		width: 430px;
		height: 594px;
		background: url(../../../../assets/new/pop_720.png) 0 0 no-repeat;
		background-size: 100% 100%;

		.remindModal-top {
			padding: 4px 0 0px;
			color: rgba(255, 255, 255, 0.65);

			.remindModal-top-name {
				width: 354px;
				height: 35px;
				font-size: 14px;
				color: #ffffff;
				font-weight: bold;
				background: url(../../../../assets/new/new_img_line_606.png) 0 0 no-repeat;
				background-size: 100% 100%;
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding: 0 14px;
				margin: 26px 37px 0;

				img {
					width: 18px;
					height: 18px;
					cursor: pointer;
				}
			}

			.remindModal-top-time {
				font-size: 14px;
				color: #ffffff;
				font-weight: bold;
				line-height: 1;
				border-bottom: 1px solid rgba(13, 157, 255, 0.3);
				padding: 15px 0;
				margin: 0 60px;
			}

			.remindModal-top-title {
				width: 80px;
				color: #cccccc;
				text-align: right;
			}

			.remindModal-top-input {
				padding: 0 10px;
				width: 60px;
				height: 26px;
				background: #747474;
				border: 1px solid #747474;
				border-radius: 6px;
				color: rgba(255, 255, 255, 1);
				margin: 0 8px 0 10px;
			}
		}

		.remindModal-list {
			height: 330px;
			/* border-bottom: 1px solid #0D9DFF; */
			font-size: 14px;
			color: #cccccc;
			font-weight: bold;
			line-height: 1;
			overflow: auto;
			padding: 0 30px;
			margin: 20px 50px 8px;

			.remindModal-item {
				margin-bottom: 12px;
				color: #eee;

				.m-b-28 {
					margin: 5px 0 14px;
				}

				.remindModal-item-check {
					width: 33.3%;
				}

				::v-deep {
					.ivu-checkbox-wrapper {
						margin-right: 0;
						font-size: 12px;
						margin-bottom: 10px;
					}
				}
			}
		}

		.remindModal-btn {
			font-size: 14px;
			color: #333333;
			font-weight: bold;
			line-height: 26px;
			text-align: center;
			border-top: 1px solid #0d9dff;
			padding-top: 12px;
			margin: 0 70px;
			display: flex;
			align-items: center;
			justify-content: center;

			.remindModal-btn-left {
				width: 40px;
				height: 26px;
				background-color: #ffffff;
				border-radius: 4px;
				margin-right: 62px;
				cursor: pointer;
			}

			.remindModal-btn-right {
				width: 40px;
				height: 26px;
				color: #ffffff;
				background-color: #0d9dff;
				border-radius: 4px;
				cursor: pointer;
			}
		}
	}

	.assignModal {
		width: 430px;
		height: 594px;
		background: url(../../../../assets/new/pop_720.png) 0 0 no-repeat;
		background-size: 100% 100%;
		font-size: 14px;
		color: #cccccc;
		font-weight: bold;
		line-height: 1;
		overflow: hidden;

		.assignModal-name {
			width: 354px;
			height: 35px;
			font-size: 14px;
			color: #ffffff;
			background: url(../../../../assets/new/new_img_line_606.png) 0 0 no-repeat;
			background-size: 100% 100%;
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 0 14px;
			margin: 31px 37px 0;

			img {
				width: 18px;
				height: 18px;
				cursor: pointer;
			}
		}

		.assignModal-ul {
			padding: 16px 54px 0px 35px;
		}

		.assignModal-btn {
			border-top: 1px solid #0d9dff;
			font-size: 14px;
			padding-top: 20px;
			margin: 0 60px;
			display: flex;
			align-items: center;
			justify-content: center;

			.assignModal-btn-left {
				width: 50px;
				height: 28px;
				color: #333333;
				border-radius: 6px;
				background-color: #ffffff;
				display: flex;
				align-items: center;
				justify-content: center;
				margin-right: 80px;

				span {
					font-size: 14px;
				}
			}

			.assignModal-btn-right {
				width: 50px;
				height: 28px;
				color: #ffffff;
				border-radius: 6px;
				background-color: #0d9dff;
				border: none;
				display: flex;
				align-items: center;
				justify-content: center;
			}

			::v-deep {
				span {
					font-size: 14px;
					font-weight: bold;
				}
			}
		}

		.assignModal-myTree {
			::v-deep {
				.ivu-select-dropdown {
					width: 252px;
				}
			}
		}

		.assignModal-item {
			display: flex;
			margin-bottom: 15px;

			::v-deep {
				.ivu-input {
					height: 30px;
					font-size: 14px;
					background: #747474;
					border: 1px solid #747474;
				}

				.ivu-cascader-arrow {
					color: #ffffff;
				}

				.ivu-cascader {
					.ivu-cascader-menu-item {
						color: #ffffff;
					}
				}

				.ivu-cascader-menu {
					.ivu-cascader-menu-item-active {
						background-color: rgba(13, 157, 255, 0.6);
					}

					.ivu-cascader-menu-item:hover {
						background-color: rgba(13, 157, 255, 0.6);
					}
				}

				.ivu-select-selection {
					height: 30px !important;
					line-height: 30px;
					font-size: 14px;
					background: #747474;
					border: 1px solid #747474;

					.ivu-select-placeholder {
						height: 30px !important;
						font-size: 14px !important;
						line-height: 30px !important;
					}

					.ivu-select-selected-value {
						height: 30px !important;
						font-size: 14px !important;
						line-height: 30px !important;
					}
				}

				.ivu-select-dropdown {
					.treeSelect-dropdown {
						.ivu-input {
							height: 32px;
							font-size: 14px;
							background: #747474;
							border: 1px solid #747474;
						}
					}
				}

				.treeSelect-bottom {
					.ivu-btn-primary {
						background-color: #0d9dff;
						border-color: #0d9dff;
					}
				}

				textarea {
					/* width: 776px; */
					height: 50px !important;
					min-height: 50px !important;
				}
			}

			.assignModal-add {
				width: 18px;
				height: 18px;
			}

			.assignModal-key {
				width: 90px;
				line-height: 30px;
				flex-shrink: 0;
				text-align: right;
				color: #bfbfbf;
			}

			.assignModal-user {
				height: 20px;
				font-size: 12px;
				border-radius: 20px;
				padding-right: 10px;
				background: rgba(255, 255, 255, 0.1);
				margin-right: 10px;
				display: flex;
				align-items: center;
				margin-bottom: 5px;

				span {
					padding: 0 3px;
				}

				img {
					width: 20px;
					height: 20px;
					border-radius: 20px;
				}
			}

			// 添加与编辑表单的 上传文件多媒体样式
			.file-img {
				li {
					background: #fff;
					/* border: none; */
					border-radius: 6px;
				}
			}

			.assignModal-item-list {
				height: 100px;
				padding-top: 12px;
				overflow-y: scroll;

				li {
					width: 70px !important;
					height: 70px !important;
				}
			}

			.assignModal-upload {
				width: 120px;
				height: 120px;
				margin-right: 10px;
				margin-bottom: 10px;
				display: flex;
				align-items: center;
				justify-content: center;
				background: #3a4147;
				border-radius: 4px;
				cursor: pointer;
			}
		}
	}

	::v-deep {
		.ivu-drawer {
			top: 70px;
		}

		.ivu-input:focus {
			border-color: #57a3f3;
			outline: 0;
			box-shadow: 0 0 0 2px rgba(45, 140, 240, 0.2);
		}

		.ivu-input {
			height: 34px;
			font-size: 14px;
			color: #ffffff;
			background: rgba(0, 186, 255, 0.35);
			border: 1px solid #00baff;
		}

		.ivu-input-with-suffix {
			height: 32px;
			background: #3a4147;
			border: none;
		}

		.ivu-select-selected-value {
			height: 34px !important;
			font-size: 14px;
			line-height: 34px !important;
		}

		.ivu-select-selection {
			height: 34px !important;
			background: rgba(0, 186, 255, 0.35);
			border: 1px solid #00baff;
		}

		.ivu-select-placeholder {
			height: 34px !important;
			line-height: 34px !important;
		}

		.ivu-select-arrow {
			color: #ffffff !important;
		}

		.ivu-modal-content {
			box-shadow: 0 0 5px 0 rgba(37, 187, 150, 0);
			background: rgba(26, 26, 26, 0);
		}

		.ivu-radio-wrapper {
			font-size: 14px;
			margin-right: 20px;
		}

		.ivu-radio-inner:after {
			background-color: #0d9dff;
		}

		.ivu-radio-checked:hover {
			.ivu-radio-inner {
				border-color: #0d9dff;
			}
		}

		.ivu-checkbox-checked {
			.ivu-checkbox-inner {
				border-color: #0d9dff;
				background-color: #0d9dff;
			}
		}

		.ivu-checkbox-inner {
			border-color: #0d9dff;
			background-color: #ffffff;
		}

		.ivu-tree-children {
			.ivu-tree-title {
				.ivu-icon {
					color: rgb(13, 157, 255) !important;
				}

				span {
					span {
						span {
							/* color: rgb(13,157,255) !important; */
						}
					}
				}
			}
		}

		.ivu-tree .ivu-checkbox-wrapper {
			margin-top: 1px;
		}

		.ivu-date-picker-cells-cell-selected em,
		.ivu-date-picker-cells-cell-selected:hover em {
			background: #0d9dff;
			box-shadow: 0 0 0 1px #0d9dff inset;
			color: #fff;
		}

		.ivu-date-picker-cells-focused em {
			box-shadow: 0 0 0 1px #0d9dff inset;
		}

		.ivu-date-picker-cells-cell-today em:after {
			background: #0d9dff;
		}

		.ivu-picker-confirm-time {
			color: #0d9dff;
		}

		.ivu-btn-primary {
			color: #fff;
			background-color: #0d9dff;
			border-color: #0d9dff;
		}

		.ivu-picker-panel-icon-btn:hover {
			color: #0d9dff;
		}

		.ivu-date-picker-header-label:hover {
			color: #0d9dff;
		}

		.ivu-date-picker-cells-year .ivu-date-picker-cells-cell-focused,
		.ivu-date-picker-cells-month .ivu-date-picker-cells-cell-focused {
			background-color: rgba(13, 157, 255, 0.3);
		}

		.ivu-date-picker-cells-cell:hover em {
			background-color: rgba(13, 157, 255, 0.3);
		}

		.treeSelect .treeSelect-dropdown .treeSelect-bottom {
			border-top: 1px solid rgba(45, 140, 240, 0.5);
		}
	}

	.emergency-plan {
		::v-deep {
			@import "@/scss/iviewCssReset/modal";

			.section-title {
				border-bottom: 1px solid #3a4147;

				span {
					border-left: 2px solid #3a4147;
				}
			}

			.list {
				border: 1px solid #3a4147;

				.list-item {
					border: 1px solid #3a4147;
				}
			}

			.selectlist {
				border: 1px solid #3a4147;

				.title {
					background: #202020;
				}

				.footer {
					border-top: 1px solid #3a4147;
					background: #1f1f1f;
				}
			}
		}
	}
	::v-deep{
		.treeSelect-tree{
			background-color: rgba(0,0,0,.6);
		}
	}
</style>
